<template>
	<view class="container">
		<TopBtn v-if="type==1" :title="'新增处方'"></TopBtn>
		<TopBtn v-if="type==2" :title="'修改处方'"></TopBtn>
		<TopBtn v-if="type==3" :title="'添加处方'"></TopBtn>
		<view class="inputBox" v-if="type!=3">
			<view class="title">
				处方名称：
			</view>
			<textArea v-model="baseFormData.recipelName" :inputNane='baseFormData.recipelName' class="mt_30"
				:maxNum="100"></textArea>
		</view>

		<view class="inputBox">
			<view class="title flex-sp-center">
				处方内容：
				<view class="flex-center-center" @click="addFormItem()">
					<image class="remove" src="@/static/prescription/add.png" mode=""></image> 添加药品
				</view>
			</view>
			<view class="">
				<form v-if="formItems.length>0">
					<view class="inuptRow flex-sp-center mt_30" v-for="(item, index) in formItems" :key="index">
						<text></text>
						<uni-combox class="nameinput" :candidates="DrugInfoList" placeholder="请输入药品名称"
							v-model="item.name"></uni-combox>
						<uni-combox :candidates="glist" placeholder="用量" v-model="item.dosage"></uni-combox>
						<uni-combox :candidates="DrugDecoctionList" placeholder="煎法" v-model="item.DecoctionMethod"></uni-combox>
						<image @click="removeFormItem(index)" class="remove" src="@/static/prescription/gb.png" mode="aspectFit">
						</image>
					</view>
				</form>
				<view class="add" @click="goinfo('pages/prescription/PrescriptionSelection')" v-else>
					<image src="../../../static/prescription/add1.png" mode=""></image>
					<view class="">
						选择常用药方
					</view>
				</view>
			</view>
		</view>
		<view class="inputBox flex1">
			<uni-forms ref="baseForm" :label-width="100" :modelValue="baseFormData">
				<uni-forms-item label="剂量：">
					<view class="inputRowBox">
						<view class="">
							共
							<uni-easyinput v-model="baseFormData.dose" :clearable="false"></uni-easyinput>
							剂
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="使用方式：" v-if="dictionary.operationList">
					<dictionary v-model="baseFormData.operationMethod" :inputName="baseFormData.operationMethod"
						:Radio="'matchIncome'" :range="dictionary.operationList"></dictionary>
				</uni-forms-item>
				<uni-forms-item label="剂数用量：" v-if="dictionary.dosageList">
					<dictionary v-model="baseFormData.dosageNum" :inputName="baseFormData.dosageNum" :Radio="'matchIncome'"
						:range="dictionary.dosageList"></dictionary>
				</uni-forms-item>
				<uni-forms-item label="使用次数：" v-if="dictionary.usageList">
					<dictionary v-model="baseFormData.usageCount" :inputName="baseFormData.usageCount" :Radio="'matchIncome'"
						:range="dictionary.usageList"></dictionary>
				</uni-forms-item>
				<uni-forms-item label="每次ml量：" v-if="dictionary.perList">
					<dictionary v-model="baseFormData.perUse" :inputName="baseFormData.perUse" :Radio="'matchIncome'"
						:range="dictionary.perList"></dictionary>
				</uni-forms-item>
			</uni-forms>
			<view class="title">
				备注：
			</view>
			<textArea v-model="baseFormData.remark" :inputNane='baseFormData.remark' class="mt_15" :maxNum="100"></textArea>
		</view>
		<view class="kong">

		</view>
		<view class="CommonToolsbtn flex-center-center" @click="createDoctorRecipel()">
			保存
		</view>
		<view v-if="type==3" class="CommonlyUsed flex-center-center" @click="goinfo('pages/prescription/Selection')">
			常用 <br />
			处方
		</view>
	</view>
</template>

<script>
	import {
		dictDataType,
		getDrugDecoctionList,
		createDoctorRecipel,
		getDoctorPrescription,
		getDoctorRecipel,
		updateDoctorRecipel,
		getDrugInfoList
	} from '@/api/commonTools'
	export default {
		data() {
			return {
				baseFormData: {
					dose: "",
					perUse: "",
					usageCount: "",
					dosageNum: "",
					operationMethod: ""
				},
				prescriptionName: "",
				formItems: [],
				glist: [],
				DrugDecoctionList: [],
				DrugInfoList: [],
				id: "",
				data: {},
				type: 1,
				dictionary: {
					perList: [],
					usageList: [],
					dosageList: [],
					operationList: []
				}

			};
		},

		onShow() {
			let that = this
			uni.$once('prescriptionId', function(data) {
				console.log("监听到事件来自返回的参数：", data);
				if (data) {
					that.getDoctorPrescription(data)
				}
			})
			uni.$once('DoctorRecipel', function(data) {
				console.log("监听到事件来自返回的参数2：", data);
				that.id = data
				that.getDoctorRecipel()
			})
		},
		onUnload() {
			uni.$off()
		},
		onLoad(e) {
			let that = this
			if (e.id) {
				this.id = e.id
				this.type = 2
				this.getDoctorRecipel()
			}
			if (e.type) {
				this.type = e.type
			}
			if (e.type == 3) {
				uni.getStorage({
					key: 'paramsData',
					success: function(res) {
						if (res.data) {
							that.data = JSON.parse(res.data);
							that.formItems = JSON.parse(that.data.drugName)
							that.baseFormData = JSON.parse(that.data.apply)
							console.log(that.data)
						}
						// uni.removeStorageSync('paramsData');
					}
				});
			}
			this.dictDataType()
			this.getDrugInfoList()
		},
		methods: {
			getDrugInfoList() {
				getDrugInfoList().then(res => {
					this.DrugInfoList = res.data
				})
				getDrugDecoctionList().then(res => {
					this.DrugDecoctionList = res.data
				})
				for (var i = 0; i < 60; i++) {
					this.glist.push(`${i+1}g`);
				}
			},
			getDoctorRecipel(e) {
				getDoctorRecipel({
					id: this.id
				}).then(res => {
					this.baseFormData = res.data
					this.formItems = JSON.parse(res.data.prescriptionContext)
				})
			},
			getDoctorPrescription(e) {
				getDoctorPrescription({
					id: e
				}).then(res => {
					this.formItems = JSON.parse(res.data.prescriptionContent)
				})
			},
			createDoctorRecipel() {
				if (this.type == 1) {
					uni.showLoading({
						title: '添加中',
						mask: true
					})
					this.baseFormData.prescriptionContext = JSON.stringify(this.formItems)
					createDoctorRecipel(this.baseFormData).then(res => {
						setTimeout(() => {
							uni.hideLoading()
							uni.$emit('show', true)
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 200); // 3000毫秒后执行
					})
				} else if (this.type == 2) {
					this.baseFormData.prescriptionContext = JSON.stringify(this.formItems)
					uni.showLoading({
						title: '添加中',
						mask: true
					})
					updateDoctorRecipel(this.baseFormData).then(res => {
						setTimeout(() => {
							uni.hideLoading()
							uni.hideLoading()
							uni.$emit('show', true)
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 200); // 3000毫秒后执行
					})
				} else if (this.type == 3) {
					var data = {}
					data.drugName = JSON.stringify(this.formItems)
					var applyInfo = {
						dose: this.baseFormData.dose,
						perUse: this.baseFormData.perUse,
						usageCount: this.baseFormData.usageCount,
						dosageNum: this.baseFormData.dosageNum,
						operationMethod: this.baseFormData.operationMethod
					}
					data.apply = JSON.stringify(applyInfo)
					uni.$emit('baseFormData', data)
					uni.showToast({
						title: '操作成功',
						duration: 200,
						icon: 'none',
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.$emit('show', true)
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 200); // 3000毫秒后执行
				}

			},
			dictDataType() {
				dictDataType({
					type: 'operation_method'
				}).then(res => {
					this.dictionary.operationList = res.data
				})
				dictDataType({
					type: 'dosage_num'
				}).then(res => {
					this.dictionary.dosageList = res.data
				})
				dictDataType({
					type: 'usage_count'
				}).then(res => {
					this.dictionary.usageList = res.data
				})
				dictDataType({
					type: 'per_use'
				}).then(res => {
					this.dictionary.perList = res.data
				})
			},
			addFormItem() {
				if (this.formItems && this.formItems.length > 50) {
					uni.showToast({
						title: '添加失败，药方限制50味药',
						duration: 200,
						icon: 'none',
					})
				}
				this.formItems.push({
					name: '',
					dosage: "",
					DecoctionMethod: ""
				});
			},
			removeFormItem(index) {
				this.formItems.splice(index, 1);
			},
			goinfo(e) {
				uni.navigateTo({
					url: `/${e}`,
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.add {
		width: 150rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.CommonlyUsed {
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
		width: 127rpx;
		height: 127rpx;
		background: #3E6EFE;
		border-radius: 50%;
		color: #fff;
	}

	.inputRowBox {
		display: flex;
		align-items: center;
		justify-content: right;

		view {
			display: flex;
			align-items: center;
		}

		/deep/.uni-easyinput {
			width: 148rpx;
			height: 60rpx;
			background-color: rgba(238, 238, 238, 0.52) !important;
			border-radius: 5rpx;
			margin: 0 10rpx;
		}

		/deep/.uni-easyinput__content {
			background-color: rgba(238, 238, 238, 0.52) !important;
		}

		/deep/.uni-easyinput__content-input {
			padding-left: 10rpx !important;
		}
	}



	.container {
		min-height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	/deep/.is-input-border {
		border: none;
	}

	/deep/.uni-forms-item {
		margin-bottom: 10rpx;
	}

	/deep/.uni-easyinput__content-input {
		text-align: right;
		padding-right: 10rpx;
	}

	/deep/.uni-easyinput__content-textarea {
		min-height: 100rpx !important;
	}

	.flex1 {
		flex: 1;
		padding-bottom: 250rpx !important;
	}

	.inputBox {
		width: 750rpx;
		min-height: 217rpx;
		background: #FFFFFF;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		margin: 30rpx 0 0 0;

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			view {
				font-weight: bold;
				font-size: 28rpx;
				color: #3B6CFE;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.uni-easyinput {
		margin-right: 15rpx;
	}

	.uni-combox {
		flex: 1;
		margin-right: 15rpx;
	}

	.nameinput {
		flex: 1.7;
	}

	/deep/.uni-input-placeholder {
		font-size: 22rpx
	}

	/deep/.uni-input-input {
		font-size: 22rpx
	}

	.inuptRow {
		&>text {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #3B6CFE;
			border-radius: 50%;
			margin-right: 11rpx;
		}
	}

	.remove {
		width: 34rpx;
		height: 34rpx;
	}
</style>